<template>
  <section class="carouselwrap">
    <div class="carousel">
      <div class="panel">
        <ul class="pic" style="width: 500%;" ref=banner>
          <li class="off" v-for="list in bannerlist" :key="list.id">
            <a :href="list.url" target="_blank">
              <div class="lazy-img">
                <img :src="list.pic" />
              </div>
            </a>
            <a href="" target="_blank" class="more-text">
              更多
            </a>
          </li>
        </ul>
        <ul class="title">
          <a target="_blank" class="on" v-if="bannerlist[count]">
            {{ bannerlist[count].name }}
          </a>
        </ul>
        <ul class="trig">
          <span :class="{on:count==index}" v-for="(list,index) in bannerlist" :key="list.id" @click="cutItem(index)"></span>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
// eslint-disable-next-line
import { mapGetters } from 'vuex';
export default {
  name: 'banner',
  data () {
    return {
      count: 0,
      interval: Function
    };
  },
  computed: {
    ...mapGetters(['requesting', 'error', 'bannerlist'])
  },
  mounted () {
    this.$store.dispatch('bannerlist');
    this.startInterval();
  },
  methods: {
    cutItem (index) {
      this.count = index;
      const distance = -100 * this.count;
      const left = distance + '%';
      this.$refs.banner.style.marginLeft = left;
      // 点击圆点停止计时 并重新开启
      clearInterval(this.interval);
      this.startInterval();
    },
    startInterval () {
      this.interval = setInterval(() => {
        this.count ++;
        if (this.count === 5) {
          this.count = 0;
        }
        const distance = -100 * this.count;
        const left = distance + '%';
        if (this.$refs.banner) {
          this.$refs.banner.style.marginLeft = left;
        }
      }, 5000);
    }
  }
};
</script>

<style lang="stylus" scoped>
.carouselwrap
  width 440px
  height 220px
  float left
.carousel,
.panel
  position relative
  width 100%
  height 100%
.carousel
  .panel
    border-radius 4px
    overflow hidden
    .pic
      z-index 1
      position relative
      transition all .3s
      li
        float left
        position relative
        &:hover
          .more-text
            opacity 1
        a
          display inline-block
        .more-text
          position absolute
          right 15px
          bottom 35px
          color #fff
          background rgba(0,0,0,.64)
          width 50px
          height 24px
          line-height 24px
          text-align center
          border-radius 4px
          transition all .2s linear
          opacity 0
          &:after
            content ""
            display inline-block
            width 6px
            height 12px
            margin -2px 0 0 5px
            vertical-align middle
            background url(../../../static/images/icons.d895b84.png) -541px -218px
    .title
      z-index 2
      position absolute
      bottom 0
      left 0
      width 100%
      height 35px
      line-height 35px
      background rgba(0,0,0,.5)
      font-size 14px
      background -webkit-linear-gradient(transparent,rgba(0,0,0,.5))
      a
        position absolute
        width 100%
        color #fff
        padding-left 10px
        z-index -1
        opacity 0
        transition all .3s
        &.on
          opacity 1
          z-index 1
    .trig
      position absolute
      z-index 3
      bottom 6px
      right 20px
      span
        display inline-block
        width 10px
        height 10px
        margin-left 8px
        border-radius 10px
        background #fff
        cursor pointer
        transition all .3s
        width 18px
        height 18px
        background-image url(../../../static/images/icons.d895b84.png)
        background-position -855px -790px
        background-color transparent
        transition none
        &.on
          background-position -855px -727px
          width 18px
          height 18px
.lazy-img
  width 100%
  height 100%
  display inline-block
  background: url(../../../static/images/img_loading.a351656.png) 50% no-repeat;
  img
    width 100%
    height 100%
    display block


</style>
